body,html{
    margin: 0;
    padding:0;
    background-color: #000;
}
@keyframes masking{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
#bound-box{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#gallery{
   //* Width and Height caculated at pug
   will-change: transform;
   animation: 3s forwards masking ease;
   box-sizing: border-box;
   transition: 2s cubic-bezier(0,.8,.3,1) transform;
}
.transition-mode{
    transition: 1.5s ease;
}
.image-box{
    display: block;
    float: left;
    box-sizing: border-box;
    .image{
        width: 100%;
        height: 100%;
        background-color: #ddd;
        background-repeat: no-repeat;
        background-size: contain;
        transform:scale(0.8,0.8);
        transition: .5s ease;
        transition-property: transform, opacity, background-color, box-shadow;
        will-change: auto;
        opacity: 0.5;
        // box-shadow: 0 4px 10px -2px rgba(0,0,0,0.2);
        &:hover{
            transform:scale(1,1);
            opacity: 1;
            // box-shadow: 0 32px 64px -10px rgba(0,0,0,0.2);
        }
        &.active{
            transform:scale(1,1) !important;
            opacity: 1 !important;
        }
        &.reset{
            transform:scale(0.8,0.8);
            opacity: 0.5;
        }
    }
}

*{
    cursor: url(''),auto;
}

